<!-- Vue 组件由三部分组成 A-01:<template> 结构 -->
<template>
  <div class="hello">
    <div>
      <div>
        <!-- 文本插值 -->
        {{ name }}
        {{ age > 60 ? '老年' : '青年' }}
      </div>
      <div>
        <!-- 属性绑定：v-bind:xxx，简写为 :xxx -->
        <input type="text" v-bind:value="name"/>
        <input type="text" :value="age"/>
        <img :src="src"/>
      </div>
      <div>
        <!-- 事件绑定：v-on:xxx，简写为 @xxx -->
        <input type="button" value="保存" v-on:click="handleSave"/>
        <input type="button" value="保存" @click="handleSave"/>
      </div>
      <div>
        <!-- 双向绑定：v-model 任意一方改变都会同步给另一方 -->
        双向绑定：{{ name }}
        <input type="text" v-model="name"/>
        <input type="button" value="改变" @click="handleChange"/>
      </div>
      <div>
        <!-- 条件渲染：v-if、v-else、v-else-if -->
        <div v-if="sex == 1">
          男
        </div>
        <div v-else-if="sex == 2">
          女
        </div>
        <div v-else>
          未知
        </div>
      </div>
      <div>
        <!-- Axios 网络请求库 发送 ajax 异步请求，前后端数据交互的一种手段 -->
        <input type="button" value="发送POST请求" v-on:click="handleSendPOST"/>
        <input type="button" value="发送GET请求" v-on:click="handleSendGET"/>
        <input type="button" value="统一请求方式" v-on:click="handleSend"/>
      </div>
    </div>
  </div>
</template>

<!-- Vue 组件由三部分组成 A-02:<script> 逻辑 -->
<script>
// 导入 axios
import axios from 'axios'

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      name: '张三',
      age: 30,
      src: 'https://www.baidu.com/img/flexible/logo/pc/peak-result.png',
      sex: 1
    }
  },
  methods:{
    handleSave(){
      alert(this.name)
    },
    handleChange(){
      this.name = '李四'
    },
    handleSendPOST(){
      // 通过 axios 发送 POST 请求
      axios.post('/api/test',{
        username:'张三',
        pwd:'123'
      }).then(res =>{
        // 请求成功
        console.log(res.data)
      }).catch(error =>{
        // 请求失败
        console.log(error.response)
      })
    },
    handleSendGET(){
      // 通过 axios 发送 GET 请求
      axios.get('/api/test1',{
        // 指定请求头信息
        headers: {
          token: '123123123123'
        }
      }).then(res => {
        console.log(res.data);
      })
    },
    handleSend(){
      // 使用 axios 提供的统一方式发送请求
      axios({
        url: '/api/test',
        method: 'post',
        data: { // data表示通过请求体传参
          username:'张三',
          pwd:'123'
        }
      }).then(res =>{
        // 请求成功
        console.log(res.data)
        // post 请求成功后再次调用 get 请求并请求头带上post 回传的数据
        axios({
          url: '/api/test1',
          method: 'get',
          headers: {
            token: res.data
          }
        }).then(res1 => {
          console.log(res1.data);
        })
      }).catch(error =>{
        // 请求失败
        console.log(error.response)
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!-- Vue 组件由三部分组成 A-03:<style> 样式 -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
